<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>留言板管理</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<!-- 条件搜索区 -->
	<form class="layui-form">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">关键字</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="name" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">开始日期</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="mindate" class="layui-input" id="test1">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">结束日期</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="maxdate" class="layui-input" id="test2">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">回复状态</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="state" class="newsType">
						<option value="">--请选择--</option>
						<option value="未回复">未回复</option>
						<option value="已回复">已回复</option>
					</select>
				</div>
			</div>
			<button class="layui-btn" lay-submit lay-filter="souBtn"><i class="layui-icon layui-icon-search"></i>搜索</button>
			<button type="reset" class="layui-btn layui-btn-primary">重置</button>
		</div>
	</form>
	<table id="demo" lay-filter="test"></table>
	<!-- 工具栏模板：头部 -->
	<script type="text/html" id="toolbarDemo1">
			<div class="layui-btn-container">
		  </div>
		</script>

	<!-- 工具栏模板：行内 -->
	<script type="text/html" id="toolbarDemo2">
			<div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="update"><i class="layui-icon">&#xe642;</i>编辑</button>
			<button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delete"><i class="layui-icon">&#xe640;</i>删除</button>
		  </div>
		</script>

	<!-- 修改的弹窗 -->
	<div id="updateDiv" style="display: none;">
		<form class="layui-form" lay-filter="updateForm" id="updateForm">
			<div class="layui-form-item">
				<label class="layui-form-label">id</label>
				<div class="layui-input-inline">
					<input type="text" name="id" placeholder="请输入" autocomplete="off"
						class="layui-input layui-disabled">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">回复状态</label>
				<div class="layui-input-inline">
					<input type="radio" name="state" value="未回复" title="未回复"> <input
						type="radio" name="state" value="已回复" title="已回复">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtnUpdate">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改的弹窗结束 -->
	<script>
		layui.use([ 'table', 'form', 'layer', 'laydate' ], function() {
			var table = layui.table;
			var $ = layui.$;
			var form = layui.form;
			var layer = layui.layer;
			var laydate = layui.laydate;

			//第一个实例
			table.render({
				elem : '#demo',
				url : 'MessageServletAdmin?method=getmessages', //数据接口
				toolbar : '#toolbarDemo1',
				method : "post", //请求方式
				id : "idtest",
				page : true, //开启分页
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',
					width : 60,
				}, {
					field : 'name',
					title : '用户姓名',
					width : 90
				}, {
					field : 'tel',
					title : '手机号',
					width : 120
				}, {
					field : 'email',
					title : '邮箱',
					width : 144
				}, {
					field : 'content',
					title : '留言内容',
					width : 150
				}, {
					field : 'submitTime',
					title : '留言时间',
					width : 144
				}, {
					field : 'state',
					title : '回复状态',
					width : 130
				},  {
					field : 'replytime',
					title : '回复时间',
					width : 144
				}, {
					title : '操作',
					toolbar : '#toolbarDemo2',
					width : 150
				} ] ]
			});

			//监听头部工具栏
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'add':
					layer.open({
						type : 1,
						area : [ '500px', '600px' ],
						content : $("#addDiv")
					});
					break;
				}
				;
			});//监听头部工具栏end

			//监听行内部工具栏
			table.on('tool(test)', function(obj) {
				var data = obj.data; //获得当前行数据
				switch (obj.event) {
				case 'update':
					console.log(data);
					form.val("updateForm", data);
					layer.open({
						type : 1,
						area : [ '500px', '600px' ],
						content : $("#updateDiv"),
					});
					break;
				case 'delete':
					layer.confirm('要删除的用户id是' + data.id, function(index) {
						obj.del();
						layer.close(index);
						//向服务端发送删除指令
						$.post("MessageServletAdmin?method=delMessage", {
							"id" : data.id
						}, function(res) {
							layer.msg(res.msg);
						}, "json")
					});
					break;
				}
				;
			});//监听行内部工具栏 end

			//监听表单提交----修改
			form.on('submit(subBtnUpdate)', function(data) {
				var url = 'MessageServletAdmin?method=updatemessage'; //请求地址
				var str = $("#updateForm").serialize(); //请求参数,表单中的数据,serialize序列化
				//ajax请求服务器,判断结果
				$.post(url, str, function(res) {
					console.log(res);
					if (res.code == 0) {
						layer.msg(res.msg, {
							time : 1000
						}, function() {
							layer.closeAll();//关闭所有窗口
							table.reload('idtest', {})//表格重载
						})
					}
				}, "json")
				return false;
			});//监听表单提交----修改end

			//监听表单提交----查询
			form.on('submit(souBtn)', function(data) {
				table.reload('idtest', {
					where : data.field
				})
				return false;
			});//监听表单提交----查询end

			//日期范围选择
			laydate.render({
				elem : '#test1',
				type : 'datetime'
			});
			//日期范围选择
			laydate.render({
				elem : '#test2',
				type : 'datetime'
			});

		});
	</script>

</body>
</html>